<template>
    <el-input placeholder="请输入关键字搜索">
        <template #prepend>
            <el-select v-model="sel" placeholder=" " style="width: 100px">
                <el-option label="地区" value="1" />
                <el-option label="学校" value="2" />
            </el-select>
        </template>
        <template #append>
            <el-button icon="Search" />
        </template>
    </el-input>
    <el-table :data="usterDatas" border style="width: 100%" stripe>
        <el-table-column label="序号" width="80" align="center">
            <template #default="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="area" label="地区" align="center" />
        <el-table-column prop="name" label="学校名称" align="center" />
        <el-table-column label="老师人数" align="center">
            <template #default="scope">
                {{ teachers[scope.row.id] }}
            </template>
        </el-table-column>
        <el-table-column label="学生人数" align="center">
            <template #default="scope">
                {{ students[scope.row.id] }}
            </template>
        </el-table-column>
    </el-table>
    <div class="jump">
        <el-pagination layout="prev, pager, next" background :total="page * 10" @current-change="handleCurrentChange" />
        <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
        <span>跳至</span>
        <el-input v-model="input" />
        <span>页</span>
        <el-button @click="jump">确定</el-button>
        <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
            <el-option label="5页/条" value="5" @click="fn" />
            <el-option label="7页/条" value="7" @click="fn" />
            <el-option label="8页/条" value="8" @click="fn" />
        </el-select>
    </div>
</template>

<script  setup lang="ts">
import service from "@/api"
import { ref, onMounted } from "vue";
const usterDatas: any = ref([])
const students: any = ref({})
const teachers: any = ref({})
const cp: any = ref('1')
const ps: any = ref('77')
const select: any = ref("")
const page: any = ref('')
const input: any = ref('')
const sel: any = ref("")
//切换页数
const handleCurrentChange = (val: any) => {
    cp.value = val
    reduce()
}
//一页多少条数据
function fn() {
    ps.value = select.value
    reduce()
}
//自定义跳转页数
function jump() {
    cp.value = input.value
    reduce()

}
onMounted(async () => {
    reduce()
    //获取学生人数
    let ress = await service.userdata.getStudentByPage()
    ress.data.data.date.forEach((item: any) => {
        for (let key in students.value) {
            if (key == item.classes.school.id) {
                students.value[key]++
            }
        }
    });
    //获取老师人数
    let resss = await service.userdata.getTeacherByPage()
    resss.data.data.data.forEach((item: any) => {
        for (let key in teachers.value) {
            if (key == item.school.id) {
                teachers.value[key]++
            }
        }
    });
    // console.log(teachers.value);

})
//渲染
async function reduce() {
    let res = await service.userdata.getLeaveApplicationByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data.data);
    usterDatas.value = res.data.data.data
    page.value = res.data.data.page.pages
    res.data.data.data.forEach((item: any) => {
        if (students.value[item.id] == undefined) {
            students.value[item.id] = 0;
            teachers.value[item.id] = 0;
        }
    });
}
</script>

<style lang="scss" scoped>
.jump {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;

    .el-input {
        width: 30px;
        height: 30px;
        padding: 0;
    }

    span,
    .el-select {
        margin: 0px 10px;
    }
}

.el-input {
    width: 350px;
    margin-bottom: 10px;
}
</style>